<template>
  <xr-create :loading="loading" :show-cancel="false" :title="title" @close="close" @save="saveClick">
    <el-tabs v-if="isTabCreate" slot="title" v-model="tabType" @tab-click="tabChange">
      <el-tab-pane v-for="tab in tabList" :key="tab.name" :name="tab.name">
        <span slot="label">{{ tab.label }}</span>
      </el-tab-pane>
    </el-tabs>

<!--    <el-button v-if="fieldsSetShow" slot="title" type="text" @click="createSetClick">新建员工字段设置</el-button>-->
    <create-sections title="个人信息">
      <el-form ref="baseForm" :key="tabType" :model="baseForm" :rules="baseRules" :validate-on-rule-change="false"
        class="wk-form" label-position="top" @change="wkBaseFormChange">
        <wk-form-item v-for="(item, index) in baseFields" :key="index" :index="index" :field-from="baseForm"
          :item="item" :disabled="item.disabled" style-percent="50%" @change="changeFied">
          <template slot-scope="{ data }">
            <v-distpicker v-if="data && data.formType == 'city'" :province="baseForm[data.field].province"
              :city="baseForm[data.field].city" :disabled="data.disabled" hide-area
              @province="selectProvince($event, data, baseForm)" @city="selectCity($event, data, baseForm)" />
          </template>
        </wk-form-item>
      </el-form>
    </create-sections>
    <create-sections title="入职信息">
      <el-form ref="entryForm" :key="tabType" :model="entryForm" :rules="entryRules" :validate-on-rule-change="false"
        class="wk-form" label-position="top">
        <wk-form-item v-for="(item, index) in entryFields" :key="index" :index="index" :field-from="entryForm"
          :item="item" :disabled="item.disabled" style-percent="50%" @change="wkEntryFormChange">

          <template slot-scope="{ data }">
            <v-distpicker v-if="data && data.formType == 'area'" :province="entryForm[data.field].province"
              :city="entryForm[data.field].city" :area="entryForm[data.field].area" :disabled="data.disabled"
              @province="selectProvince($event, data, entryForm)" @city="selectCity($event, data, entryForm)"
              @area="selectArea($event, data, entryForm)" />
          </template>
        </wk-form-item>
      </el-form>
    </create-sections>
    <create-sections v-if="createType == 'new'" title="入职材料">
      <el-button icon="el-icon-plus" @click="addMaterialClick" circle></el-button>
      <el-button icon="el-icon-delete" :disabled="multiple" @click="deleteMaterialClick" circle></el-button>
      <el-table
        :data="materialList"
        @selection-change="handleSelectionChange"
        style="width: 100%; margin-top: 10px">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="type" label="类型" :formatter="typeFormat"/>
        <el-table-column prop="fileName" label="文件名称" />
      </el-table>
    </create-sections>

    <!--  材料上传  -->
    <el-dialog title="材料上传"
               :visible.sync="materialOpen"
               width="25%"
               v-if="materialOpen"
               append-to-body
               v-loading="materialLoading"
    >
      <el-form ref="form" :model="empMaterial" label-width="20px" label-position="top">
        <el-form-item label="类型" prop="subType" style="width: 120%">
          <el-cascader
            v-model="empMaterial.typeList"
            :options="materialTypeTree"
            placeholder="请选择选择材料类型"
            :props="materialProps">
          </el-cascader>
        </el-form-item>
        <el-form-item label="材料" prop="type">
          <div
            class="files-box-detail">
            <flexbox
              :gutter="0"
              wrap="wrap">
              <flexbox-item
                v-if="detailList.length <= 0"
                :span="10/1"
                class="detail-cell">
                <div class="cell-upload-box">
                  <el-upload
                    :show-file-list="false"
                    :http-request="fileUpload"
                    action="http"
                    drag
                    multiple>
                    <i class="wk wk-icon-upload upload-icon"/>
                    <div class="upload-name">点击或拖拽上传</div>
                  </el-upload>
                </div>
              </flexbox-item>
              <flexbox-item
                v-if="detailList.length > 0"
                v-for="(item, index) in detailList"
                :key="index"
                :span="10/1"
                class="detail-cell">
                <div class="detail-cell-box">
                  <div class="detail-cell-body">
                  <span>
                    <img
                      v-if="isShowImage(item.file.name)"
                      :key="item.file.url"
                      v-src="item.file.url">
                    <img
                      v-if="!isShowImage(item.file.name)"
                      :key="item.file.url"
                      v-src="getFileTypeIcon(item.file.url)">
                  </span>

                    <div class="body-handle">
                      <div class="handle-items">
                      <span
                        class="handle-item"
                        @click="previewFile(item, index)">
                        <i class="wk wk-icon-eye-solid" />
                      </span>
                      </div>
                    </div>
                  </div>
                  <flexbox class="detail-cell-footer">
                    <div
                      v-if="editDetailIndex!=index"
                      class="footer-name">{{ item.file.name }}</div>
                    <el-input
                      v-if="editDetailIndex==index"
                      ref="editInput"
                      v-model="editInputContent"
                      autofocus
                      placeholder="请输入内容"
                      @blur="editInputBlur" />
                    <i
                      class="wk wk-edit footer-item"
                      @click="handleDetailItemClick('edit',item, index)" />
                    <i
                      class="wk wk-s-delete footer-item"
                      @click="handleDetailItemClick('delete',item, index)" />
                  </flexbox>
                </div>
              </flexbox-item>
            </flexbox>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="materialOpen = false">取 消</el-button>
        <el-button type="primary" @click="materialSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-button v-if="!detail" slot="footer" @click="saveContinueClick">保存并继续新建</el-button>
  </xr-create>
</template>

<script>
import {
  adminFileUploadAPI,
  adminFileQueryByIdAPI,
  adminFileRenameFileAPI
} from '@/api/admin/file'
import {
  hrmEmployeeAddFieldsAPI,
  hrmEmployeeFieldsAddAPI,
  hrmEmployeeAgainOnboardingAPI,
  hrmEmployeeConfirmEntryAPI,
  hrmEmployeeFieldVerifyAPI
  // hrmEmployeeAllListAPI
} from '@/api/hrm/employee'
import {
  hrmRecruitChannelQueryAPI
} from '@/api/hrm/employeePost'
// import {
//   hrmDeptQueryTreeListAPI
// } from '@/api/hrm/dept'

import XrCreate from '@/components/XrCreate'
import CreateSections from '@/components/CreateSections'
import WkFormItem from '@/components/NewCom/WkForm/WkFormItem'
import VDistpicker from '@/components/VDistpicker'

import CustomFieldsMixin from '@/mixins/CustomFields'
import { objDeepCopy,getFileIconWithSuffix } from '@/utils'
import { isEmpty, isArray } from '@/utils/types'
import { mapGetters } from 'vuex'
import employField from '@/views/hrm/employee/model/employField'
import {
  employeeModel,
} from '@/views/hrm/employee/model/employee'

export default {
  // 员工创建
  name: 'EmployeeCreateView',
  components: {
    XrCreate,
    CreateSections,
    WkFormItem,
    VDistpicker
  },
  filters: {},
  mixins: [CustomFieldsMixin],
  props: {
    createType: {
      type: String,
      default: 'new'
    }, // confirm 确认入职 new 新建员工 wait 待入职 again 再入职
    detail: Object
  },
  data() {
    return {
      tempPolTimeObject: {},
      materialProps: {
        expandTrigger: 'click',
        multiple: false,
        checkStrictly: false,
        value: "typeId",
        label: "name",
        children: "children",
      },
      /** 详情list */
      detailList: [],
      editDetailItem: {},
      editInputContent: '',
      editDetailIndex: -1,
      empMaterial: {},
      materialTypeTree: [],
      materialOpen: false,
      materialLoading: false,
      // 选中数组
      ids: [],
      multiple: true,
      materialList: [],
      loading: false,
      tabType: '1',
      // 1已入职 2待入职
      tabList: [{
        label: '新建在职员工',
        name: '1'
      }],
      baseFields: [],
      baseRules: {},
      // tempBaseRules: {},
      baseForm: {},

      // 入职
      entryFields: [],
      entryRules: {},
      // tempEntryRules: {},
      entryForm: {},
      channelList: [] // 招聘渠道数据
    }
  },
  computed: {
    ...mapGetters(['manage']),
    // 是 tab 效果新建
    isTabCreate() {
      return this.createType == 'new' || this.createType == 'wait'
    },
    title() {
      return {
        again: '再入职',
        confirm: '确认入职'
      }[this.createType]
    },
    // 展示字段设置
    fieldsSetShow() {
      return this.isTabCreate && this.manage && this.manage.hrm && this.manage.hrm.archives
    },
    id() {
      return this.detail ? this.detail.employeeId : ''
    }
  },
  watch: {
    baseForm: {
      handler() {
        if (this.baseForm.pol_id === '群众' || this.baseForm.pol_id === '团员'){
          const index = this.baseFields.findIndex(item => item.fieldName === 'pol_time');
          if (index !== -1) {
            this.baseFields.splice(index, 1);
            this.baseForm.pol_time = null;
          }
        }else {
          const index = this.baseFields.findIndex(item => item.fieldName === 'pol_time');
          if (index === -1) {
            this.baseFields.splice(6, 0, this.tempPolTimeObject)
          }
        }
      },
      deep: true,
      immediate: true
    },
  },
  created() {
    // 如果是待入职  默认展示 新建待入职员工
    if (this.createType === 'wait') {
      this.tabType = '2'
    }
  },
  mounted() {
    this.getAddFields()
    this.getFileTypeTree()
  },

  beforeDestroy() { },
  methods: {
    typeFormat(row) {
      if (row.typeList && row.typeList.length > 0) {
        let typeName = [];
        row.typeList.forEach(item => {
          employeeModel.fileType.forEach(type => {
            if (item == type.typeId){
              typeName.push(type.name);
            }
          });
        });
        return typeName.join('/');
      }
      return '';
    },
    getFileTypeTree() {
      let typeData = employeeModel.fileType.filter(item => {
        return item.typeId <= 30 && item.typeId !== 21 && item.typeId !== 3 && item.typeId !== 4
      })
      let root = typeData.filter(item => {
        return item.parentId === 0;
      })
      this.getChildrenNodes(root, typeData);
      this.materialTypeTree = root;
    },
    /** 递归获取子节点 */
    getChildrenNodes(rootNode, nodeList) {
      rootNode.forEach(item => {
        let children = nodeList.filter(node => {
          return item.typeId === node.parentId
        })
        if (children.length > 0) {
          item.children = children;
          this.getChildrenNodes(children, nodeList)
        }else {
          item.children = null;
        }
      });
    },
    handleDetailItemClick(type, item, index) {
      if (type == 'edit') {
        this.editDetailItem = item
        this.editDetailIndex = index
        this.editInputContent = item.file.name
        var self = this
        setTimeout(() => {
          self.$refs.editInput[0].focus()
        }, 100)
      }else if (type == 'delete') {
        this.$confirm('您确定要删除此附件吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.empMaterial = {
              fileId: null,
              fileName: null,
              subType: null,
            }
          this.detailList.splice(index, 1)
        })
          .catch(() => {})
      }
    },
    /** 编辑输入完成 */
    editInputBlur() {
      adminFileRenameFileAPI({
        fileId: this.editDetailItem.fileId,
        name: this.editInputContent
      })
        .then(res => {
          this.editDetailIndex = -1
          this.editDetailItem.file.name = this.editInputContent
          this.empMaterial.fileName = this.editInputContent
          this.editInputContent = ''
          this.editDetailItem = {}
          this.$message.success('编辑成功')
        })
        .catch(() => {
        })
    },
    // 预览图片
    previewFile(item, index) {
      var previewList = this.detailList.map(element => {
        return element.file
      })
      this.$wkPreviewFile.preview({
        index: index,
        data: previewList
      })
    },
    getFileTypeIcon(url) {
      const temps = url ? url.split('.') : []
      var ext = ''
      if (temps.length > 0) {
        ext = temps[temps.length - 1]
      } else {
        ext = ''
      }
      return getFileIconWithSuffix(ext)
    },
    isShowImage(name) {
      const temps = name ? name.split('.') : []
      var ext = ''
      if (temps.length > 0) {
        ext = temps[temps.length - 1]
      } else {
        ext = ''
      }
      return ['jpg', 'png', 'gif', 'jpeg'].includes(ext.toLowerCase())
    },
    /** 附件上传 */
    fileUpload(val) {
      // val.file
      this.$wkUploadFile.upload({
        request: adminFileUploadAPI,
        file: val.file
      }).then(completeData => {
        this.materialLoading = true
        this.empMaterial.fileId = completeData.res.data.fileId
        adminFileQueryByIdAPI(completeData.res.data.fileId).then(res => {
          this.empMaterial.fileName = res.data.name;
          this.detailList = [];
          this.detailList.push({file: res.data, fileId: completeData.res.data.fileId});
          this.materialLoading = false;
        }).catch(() => {
          this.materialLoading = false;
        })
      }).catch(() => {})
    },
    materialSubmit(){
      if (this.detailList.length <= 0) {
        this.$message.error('请上传材料')
        return
      }
      if (!this.empMaterial.typeList || this.empMaterial.typeList.length <= 0) {
        this.$message.error('请选择材料类型')
        return
      }
      if (!this.empMaterial.fileId){
        this.$message.error('请上传材料')
        return
      }
      this.materialOpen = false
      this.empMaterial.subType = this.empMaterial.typeList[this.empMaterial.typeList.length - 1];
      this.materialList.push(this.empMaterial);
    },
    addMaterialClick(){
      this.materialOpen = true
      this.empMaterial = {
        fileId: null,
        fileName: null,
        subType: null,
        typeList: [],
      }
      this.detailList = [];
    },
    deleteMaterialClick(){
      this.materialList = this.materialList.filter(item => {
        return !this.ids.includes(item.fileId)
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.fileId)
      this.multiple = !selection.length
    },
    changeFied(item, index, value, valueList) {
      console.log(value);
      if (item.name == '身份证号' && value.length == 18) {
        console.log("🚀 ~ changeFied ~ item, index, value, valueList:", value)
        var genderCode = value.substring(16, 17);
        let sexs = genderCode % 2 === 0 ? "女" : "男"
        let data = this.baseFields.find(o => {
          return o.name == '性别'
        })
        let sex = data.setting.find(o => {
          return o.name == sexs
        })
        if (data) {
          this.baseForm[data.fieldName] = sex.value
        }

        let birthDay = value.substr(6, 4) + "-" + value.substr(10, 2) + "-" + value.substr(12, 2);
        let birth = this.baseFields.find(o => {
          return o.name == '出生日期'
        })
        if (birth) {
          this.baseForm[birth.fieldName] = birthDay
        }
      }
    },
    /**
     * 获取添加字段
     */
    getAddFields() {
      // 除待入职 其他都传2
      this.loading = true
      hrmEmployeeAddFieldsAPI({
        entryStatus: this.tabType
      }).then(res => {
        const baseFields = []
        const baseRules = {}
        let baseForm = {}

        // 入职
        const entryFields = []
        const entryRules = {}
        let entryForm = {}

        const resData = res.data || []
        const assistIds = this.getFormAssistIds(resData)

        resData.forEach(item => {
          this.handleFieldExtendList(item)
          const temp = this.getFormItemDefaultProperty(item)
          temp.show = !assistIds.includes(item.formAssistId)

          // 特殊字段允许多选
          this.getItemRadio(item, temp)
          if ((item.formType === 'structure' && item.fieldName === 'dept_id') ||
            (item.formType === 'user' && item.fieldName === 'parent_id')) {
            temp.radio = true
          }

          temp.disabled = false

          employField.getCreateFieldDefalutData(temp)

          if (temp.formType === 'area') {
            temp.formType = 'address' // 和 address 类型功能一直
          }

          // if (temp.fieldName === 'date_of_birth'||temp.fieldName === 'sex') {
          //   temp.disabled = true
          // }

          if (temp.label === 1) {
            baseFields.push(temp)

            // 籍贯
            if (temp.formType == 'city') {
              temp.defaultValue = {
                province: '',
                city: ''
              }
            }

            // 是否能编辑权限
            if (temp.show) {
              baseRules[temp.field] = this.getRules(item)
              baseForm[temp.field] = this.getItemValue(temp)
            }
          } else {
            entryFields.push(temp)

            if (temp.formType == 'recruit_channel') { // 'recruit_channel' 招聘渠道
              temp.formType = 'select'
              if (this.channelList && this.channelList.length > 0) {
                temp.setting = this.channelList
              } else {
                this.getChannelDetail(temp)
              }
            }

            if (temp.show) {
              entryRules[temp.field] = this.getRules(item)
              entryForm[temp.field] = this.getItemValue(temp)
            }
          }
        })

        // 填充值
        // confirm 确认入职  again 再入职  需要当前员工详情
        if (this.createType === 'again' || this.createType === 'confirm') {
          if (this.detail) {
            const detail = objDeepCopy(this.detail)
            const baseDetailForm = {}
            baseFields.forEach(item => {
              // humpField 用于取值
              const humpField = this.toHump(item.field)
              // if (item.field == 'native_place') {
              //   // 籍贯
              //   const citys = detail[humpField]
              //   if (citys) {
              //     const citys = citys.split(',')
              //     baseDetailForm.native_place = {
              //       province: citys[0] || '',
              //       city: citys[1] || ''
              //     }
              //   } else {
              //     baseDetailForm.native_place = {}
              //   }
              // } else {
                baseDetailForm[item.field] = detail[humpField]
              // }
            })
            baseForm = { ...baseForm, ...baseDetailForm }

            const entryDetailForm = { employment_forms: detail.employment_forms }
            entryFields.forEach(item => {
              // humpField 用于取值
              const humpField = this.toHump(item.field)
              // 工作城市
              if (item.field === 'join_company_time' || item.field === 'company_age_start_time' || item.field === 'post_status') {
                entryDetailForm[item.field] = null
              } else {
                entryDetailForm[item.field] = detail[humpField]
              }
            })
            // 超出范围的非正式状态 改为空值
            if (detail.employment_forms == 2 && (detail.status < 3 || detail.status > 8)) {
              entryDetailForm.status = ''
            }
            entryForm = { ...entryForm, ...entryDetailForm }
          }
        } else if (this.createType === 'wait') {
          // 候选人自动填充的字段：姓名、性别、手机号码、个人邮箱
          if (this.detail) {
            const detail = objDeepCopy(this.detail)
            baseForm = {
              ...baseForm,
              ...{
                id_type: 1,
                employee_name: detail.candidateName,
                mobile: detail.mobile,
                email: detail.email,
                sex: detail.sex
              }
            }
          }
        }

        this.baseFields = baseFields
        const index = this.baseFields.findIndex(item => item.fieldName === 'pol_time');
        if (index !== -1) {
          this.tempPolTimeObject = this.baseFields[index];
        }
        this.baseRules = baseRules
        // this.tempBaseRules = JSON.parse(JSON.stringify(baseRules))
        this.baseForm = baseForm

        // 入职
        this.entryFields = entryFields
        this.entryRules = entryRules
        // this.tempEntryRules = JSON.parse(JSON.stringify(entryRules))
        this.entryForm = entryForm

        this.handleProbationAndTypeDisabled(entryFields, entryForm)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    // 下划线转换驼峰
    toHump(name) {
      return name.replace(/\_(\w)/g, function (all, letter) {
        return letter.toUpperCase()
      })
    },

    /**
     * 处理 试用期 非正式类型 disabled
     */
    handleProbationAndTypeDisabled(entryFields, entryForm) {
      const employment_forms = entryForm.employment_forms
      entryFields.forEach(item => {
        if (item.fieldName === 'status') {
          item.disabled = !employment_forms || employment_forms != 2
          if (item.disabled) {
            entryForm.status = ''
            this.entryRules[item.fieldName] = []
          } else {
            this.entryRules[item.fieldName] = [{
              validator: (rule, value, callback) => {
                if (isEmpty(value)) {
                  callback(new Error(`${item.name}不能为空`))
                } else {
                  callback()
                }
              },
              trigger: ['change']
            }]
          }
        }
      })
    },

    /**
     * tab change
     */
    tabChange() {
      this.materialList = []
      this.baseFields = []
      this.baseRules = {}
      this.baseForm = {}

      // 入职
      this.entryFields = []
      this.entryRules = {}
      this.entryForm = {}
      this.getAddFields()
    },

    /**
     * chage
     */
    wkEntryFormChange(item, index, value, valueList) {
      // 部门进行的选择
      if (item.field == 'deptId' || item.field == 'dept_id') {
        console.log('object', item, index, value, valueList)
        if (valueList && valueList.length) {
          const depObj = valueList[0]
          this.$set(this.entryForm, 'parent_id', depObj.mainEmployeeId)
        } else {
          this.$set(this.entryForm, 'parent_id', '')
        }
      } else if (item.field == 'employment_forms') {
        this.handleProbationAndTypeDisabled(this.entryFields, this.entryForm)
      } else if (item.field == 'entry_time') {
        const companyAge = this.entryFields.find(item => item.fieldName === 'company_age_start_time')
        if (companyAge) {
          this.entryForm.company_age_start_time = this.entryForm.entry_time
        }
      // } else if (item.field == 'work_forms') {
      //   this.entryRules = JSON.parse(JSON.stringify(this.tempEntryRules))
      //   this.baseRules = JSON.parse(JSON.stringify(this.tempBaseRules))
      //   //用工形式选项
      //   let checkList = ['highest_education','highest_tech_level']
      //   if(value == '退休返聘'){
      //     for (let key in this.baseRules) {
      //       this.baseRules[key].forEach((item, index) => {
      //         if(checkList.includes(key)){
      //           item.required = true
      //         }
      //       })
      //     }
      //   }
      //   if (value == '劳务派遣' || value == '劳务外包' || value == '临时工' || value == '外部董事' || this.entryForm.post_status == '退休'){
      //     for (let key in this.baseRules) {
      //       if (this.baseRules.hasOwnProperty(key)) {
      //         if (key != 'employee_name' && key != 'mobile'){
      //           if (value != '外部董事' && key == 'id_number'){
      //             continue;
      //           }
      //           this.baseRules[key].forEach((item, index) => {
      //             if(checkList.includes(key)){
      //               item.required = true
      //             }else{
      //               item.required = false
      //             }
      //
      //           })
      //         }
      //       }
      //     }
      //     for (let key in this.entryRules) {
      //       if (this.entryRules.hasOwnProperty(key)) {
      //         if (key != 'org' && key != 'dept'){
      //           if (key == 'work_forms' || (key == 'post_status' && value != '外部董事')){
      //             continue;
      //           }
      //           this.entryRules[key].forEach((item, index) => {
      //             item.required = false
      //           })
      //         }
      //       }
      //     }
      //   }
      //   this.$forceUpdate()
      // } else if (item.field == 'post_status') {
      //   this.entryRules = JSON.parse(JSON.stringify(this.tempEntryRules))
      //   this.baseRules = JSON.parse(JSON.stringify(this.tempBaseRules))
      //   //在岗状态
      //   if (value == '退休' || this.entryForm.work_forms == '劳务派遣' || this.entryForm.work_forms == '劳务外包' || this.entryForm.work_forms == '临时工' || this.entryForm.work_forms == '外部董事'){
      //     for (let key in this.baseRules) {
      //       if (this.baseRules.hasOwnProperty(key)) {
      //         if (key != 'employee_name' && key != 'mobile'){
      //           if (this.entryForm.work_forms != '外部董事' && key == 'id_number'){
      //             continue;
      //           }
      //           this.baseRules[key].forEach((item, index) => {
      //             item.required = false
      //           })
      //         }
      //       }
      //     }
      //     for (let key in this.entryRules) {
      //       if (this.entryRules.hasOwnProperty(key)) {
      //         if (key != 'org' && key != 'dept'){
      //           if (key == 'work_forms' || (key == 'post_status' && this.entryForm.work_forms != '外部董事')){
      //             continue;
      //           }
      //           this.entryRules[key].forEach((item, index) => {
      //             item.required = false
      //           })
      //         }
      //       }
      //     }
      //   }
      //   this.$forceUpdate()
      }

      if ([
        'select',
        'checkbox'
      ].includes(item.formType) &&
        item.remark === 'options_type' &&
        item.optionsData) {
        const { fieldForm, fieldRules } = this.getFormContentByOptionsChange(this.entryFields, this.entryForm)
        this.entryForm = fieldForm
        this.entryRules = fieldRules
      }
    },

    /**
     * 基础信息change
     */
    wkBaseFormChange(item, index, value, valueList) {
      if ([
        'select',
        'checkbox'
      ].includes(item.formType) &&
        item.remark === 'options_type' &&
        item.optionsData) {
        const { fieldForm, fieldRules } = this.getFormContentByOptionsChange(this.baseFields, this.baseForm)
        this.baseForm = fieldForm
        this.baseRules = fieldRules
      }
    },

    /**
     * 选择省市
     */
    selectProvince(data, item, form) {
      form[item.field].province = data.value
    },

    selectCity(data, item, form) {
      form[item.field].city = data.value
    },

    selectArea(data, item, form) {
      form[item.field].area = data.value
    },

    /**
     * 验证唯一
     */
    UniquePromise({ field, value }) {
      // this.action 详情
      return this.getUniquePromise(field, value, this.action)
    },

    /**
     * 验证唯一
     */
    getUniquePromise(field, value, detail) {
      return new Promise((resolve, reject) => {
        var validatesParams = {}
        validatesParams.fieldId = field.fieldId
        validatesParams.id = this.id
        validatesParams.value = this.getRealParams(field, value)

        hrmEmployeeFieldVerifyAPI(validatesParams).then(res => {
          // status 1 通过 0
          const resData = res.data || {}
          if (resData.status === 1) {
            resolve()
          } else {
            reject(`${field.name}已存在`)
          }
        }).catch(() => {
          reject()
        })
      })
    },

    close() {
      this.$emit('close')
    },

    saveClick(saveContinue = false) {
      this.$refs.baseForm.validate(valid => {
        if (valid) {
          this.$refs.entryForm.validate(valid => {
            if (valid) {
              this.uploadCreateData(saveContinue)
            } else {
              // 提示第一个error
              this.getFormErrorMessage(this.$refs.entryForm)
              return false
            }
          })
        } else {
          // 提示第一个error
          this.getFormErrorMessage(this.$refs.baseForm)
          return false
        }
      })
    },

    /**
     * 提交数据
     */
    uploadCreateData(saveContinue) {
      const entryForm = objDeepCopy(this.entryForm)
      const baseForm = objDeepCopy(this.baseForm)

      if (entryForm.employment_forms == 1) {
        delete entryForm['status']
      } else if (entryForm.employment_forms == 2) {
        delete entryForm['probation']
      }

      // 工作城市
      if (entryForm.work_city) {
        const keys = Object.keys(entryForm.work_city)
        let work_city = ''
        keys.forEach(key => {
          if (entryForm.work_city[key]) {
            if (!work_city) {
              work_city = entryForm.work_city[key]
            } else {
              work_city += `,${entryForm.work_city[key]}`
            }
          }
        })
        entryForm.work_city = work_city
      } else {
        entryForm.work_city = ''
      }

      // 籍贯
      // if (baseForm.native_place) {
      //   const address = baseForm.native_place
      //   const addressList = []
      //   for (const key in address) {
      //     if (address[key]) {
      //       addressList.push(address[key])
      //     }
      //   }
      //   baseForm.native_place = addressList.join(',')
      // } else {
      //   baseForm.native_place = ''
      // }
      // // 出生地
      // if (baseForm.birth_place) {
      //   const place = baseForm.birth_place
      //   const placeList = []
      //   for (const key in place) {
      //     if (place[key]) {
      //       placeList.push(place[key])
      //     }
      //   }
      //   baseForm.birth_place = placeList.join(',')
      // } else {
      //   baseForm.birth_place = ''
      // }
      const entryFormParams = this.getSubmiteParams([].concat.apply([], this.entryFields), entryForm, ['isFixed', 'labelGroup'])
      const baseFormParams = this.getSubmiteParams([].concat.apply([], this.baseFields), baseForm, ['isFixed', 'labelGroup'])

      const baseDisabledFields = []
      this.baseFields.forEach(item => {
        if (item.disabled) {
          baseDisabledFields.push(item.fieldName)
        }
      })
      const employeeFieldList = baseFormParams.field.filter(item => !baseDisabledFields.includes(item.fieldName))
      employeeFieldList.forEach(item => {
        // 表格字段value 和 filed
        if (item.type === 45) {
          const tableValue = item.value
          if (isArray(tableValue)) {
            tableValue.forEach(children => {
              if (children) {
                children.forEach(child => {
                  if (child) {
                    child.fieldValue = child.value
                  }
                })
              }
            })
          }
        }
        item.fieldValue = item.value
        delete item.value
      })

      const entryDisabledFields = []
      this.entryFields.forEach(item => {
        if (item.disabled) {
          entryDisabledFields.push(item.fieldName)
        }
      })
      const postFieldList = entryFormParams.field.filter(item => !entryDisabledFields.includes(item.fieldName))
      postFieldList.forEach(item => {
        // 表格字段value 和 filed
        if (item.type === 45) {
          const tableValue = item.value
          if (isArray(tableValue)) {
            tableValue.forEach(children => {
              if (children) {
                children.forEach(child => {
                  if (child) {
                    child.fieldValue = child.value
                  }
                })
              }
            })
          }
        }
        item.fieldValue = item.value
        delete item.value
      })

      const params = { employeeFieldList, postFieldList, "materialList": this.materialList }
      if (this.detail) {
        params.employeeId = this.detail.employeeId
      }

      // 如果是待入职 传候选人id
      if (this.createType == 'wait') {
        params.candidateId = this.detail.candidateId
      }

      // 加入工号
      params.jobNumber = entryForm.job_number

      this.loading = true
      let request = null
      if (this.createType == 'new' || this.createType == 'wait') {
        request = hrmEmployeeFieldsAddAPI

        // 在职 和 待入职 2
        params.entryStatus = this.tabType

        if (this.tabType == '2') {
          // 删掉工号信息
          delete params['jobNumber']
        }
      } else if (this.createType == 'again') {
        request = hrmEmployeeAgainOnboardingAPI
      } else if (this.createType == 'confirm') {
        request = hrmEmployeeConfirmEntryAPI
      }
      request(params).then(res => {
        if (saveContinue) {
          this.tabChange()
        } else {
          this.$emit('close')
        }

        this.$message.success('新建成功')
        this.$emit('success')
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * 获取字段值对象
     */
    getFieldValueObj(data, form) {
      console.log(data, form)
      return {
        fieldId: data.fieldId,
        fieldName: data.fieldName,
        fieldValue: form[data.fieldName],
        fieldValueDesc: '',
        isFixed: data.isFixed,
        labelGroup: data.labelGroup,
        name: data.name,
        oldFieldValueDesc: '',
        type: data.type
      }
    },

    /**
     * 保存并继续新建
     */
    saveContinueClick() {
      this.saveClick(true)
    },

    /**
     * 进入新建设置
     */
    createSetClick() {
      this.$router.push({
        name: 'employeeManageSet',
        query: {
          menuIndex: 'EmployeeFields',
          entryStatus: this.tabType, // 入职状态 1 在职 2 待入职
          redirect: '/hrm/employee'
        }
      })
    },

    /**
     * 处理表格数据块数据
     */
    handleFieldExtendList(item) {
      // 表格为了展示，提前处理为编辑数据
      if (item.formType === 'detail_table') {
        if (!isEmpty(item.fieldExtendList)) {
          const fieldExtendList = item.fieldExtendList
          if (isArray(fieldExtendList)) {
            fieldExtendList.forEach(child => {
              if (child) {
                employField.getCreateFieldDefalutData(child)
                child.value = child.fieldValue
              }
            })
          }
        }
      }
    },

    /**
     * 获取渠道信息
     */
    getChannelDetail(item) {
      return new Promise((resolve, reject) => {
        hrmRecruitChannelQueryAPI()
          .then(res => {
            const channelList = res.data || []
            channelList.forEach(item => {
              if (item.status == 1) {
                item.label = item.value
                item.value = item.channelId
              }
            })
            this.channelList = channelList
            this.$set(item, 'setting', this.channelList)
            resolve(this.channelList)
          })
          .catch(() => {
          })
      })
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs {
  width: 100%;

  .el-tabs__header {
    margin-bottom: 0;
  }

  .el-tabs__nav-wrap::after {
    display: none;
  }

  .el-tabs__item {
    font-weight: bold;
    color: $--color-text-primary;
  }
}

.wk-form {
  display: flex;
  flex-wrap: wrap;

  ::v-deep.is-detail_table {
    width: 100% !important;
  }
}

/** 详情cell */
.detail-cell {
  position: relative;
  padding-right: 40px;
  padding-bottom: 20px;

  /** 详情 */
  .cell-upload-box {
    padding: 5px;
    border: 1px solid $--border-color-base;
    border-radius: 2px;

    .upload-icon {
      display: inline-block;
      margin-top: 25px;
      font-size: 40px;
      color: #777;
    }

    .upload-name {
      margin-top: 5px;
      color: #777;
    }
  }

  .detail-cell-box {
    padding: 5px;
    border: 1px solid $--border-color-base;
    border-radius: 2px;

    .detail-cell-body {
      position: relative;
      overflow: hidden;
      border-radius: 2px;

      span {
        display: block;
        width: 100%;
        text-align: center;

        img {
          width: auto;
          height: 100px;
          min-height: 100px;
          overflow: hidden;
          border-style: none;
        }
      }

      .body-handle {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        display: none;
        background-color: rgba(0, 0, 0, 0.5);

        .handle-items {
          margin-top: 35px;
          text-align: center;

          .handle-item {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 15px;

            i {
              color: white;
            }
          }
        }
      }
    }

    .detail-cell-body:hover {
      .body-handle {
        display: block;
      }
    }

    .detail-cell-footer {
      padding-top: 5px;

      .footer-name {
        display: flex;
        flex: 1;
        width: 180px;
        height: 40px;
        margin-right: 5px;
        overflow: hidden;
        color: $--color-text-primary;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .el-input {
        ::v-deep input {
          height: 24px;
          line-height: 24px;
        }
      }

      .footer-item {
        flex-shrink: 0;
        padding: 3px;
        color: #777;
        cursor: pointer;

        &:hover {
          color: $--color-primary;
        }
      }
    }
  }
}

/** 拖拽上传 */
.cell-upload-box ::v-deep .el-upload {
  display: block;
}

.cell-upload-box ::v-deep .el-upload-dragger:hover {
  border-color: $--color-primary;
}

.cell-upload-box ::v-deep .el-upload-dragger {
  width: 100%;
  height: 131px;
  border-radius: 2px;
}
</style>
